<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>state简写方式</title>
</head>

<body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>


    <script type="text/babel">
        class Lss extends React.Component {
            showOne = () => {
                console.log('refOne', this.nodeValue.value);
            }
            showTwo = () => {
                console.log('refTwo', this);
                console.log('refTwo', this.c.value);
            }
            saveNode = (currentNode) => {
                this.nodeValue = currentNode
            }
            render() { // render用来渲染一个虚拟DON
                return (
                    <div>
                        {/* 意思是把当前的dom节点挂载组件自己身上*/}
                        {/* 注意这种注释的写法 <input ref={(currentNode) => { this.nodeValue = currentNode }} placeholder="请输入" /> &nbsp;*/}
                        <input ref={this.saveNode} placeholder="请输入" />
                        <button onClick={this.showOne}>点击弹出左侧值</button> &nbsp;
                        <input ref={(c) => { this.c = c }} onBlur={this.showTwo} />
                    </div>
                )
            }
        }

        ReactDOM.render(<Lss />, document.querySelector('#test'))

        /**
         * 这种回调函数的写法是性能好一些，不过低版本的react中，依然有很多程序员写的是字符串ref
         * 而不是回调函数的ref。
         *
         * 就是把当前节点直接挂载到组件的实例对象this自身身上，不挂在ref身上了,相当于往外一层了
         *
         * 注意箭头函数写在外面和写在里面其实没啥区别，官网也说了。区别就是组件更新的时候，ref的内联回调函数写法会执行两次
         * 一次为null，另一次为dom自身。但是没啥影响，推荐还是使用内联写法
         * */

    </script>
</body>

</html>